import React, { useState, useEffect } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

export default function Fei() {
    const navigate = useNavigate()
    const [Fei, setFei] = useState([])
    const back = () => {
        navigate('/app/home')
    }

    const getFei = async () => {
        const res = await axios.get('http://localhost:3000/getFei')
        setFei(res.data.fei)
    }

    useEffect(() => {
        getFei()
    }, [])

    return (
        <div>
            <NavBar onBack={back}>
                <h3>非遗资讯</h3>
            </NavBar>
            <hr />
            {Fei.map(item => {
                return <div onClick={() => { navigate('/feixiang', { state: item }) }} style={{ display: 'flex', width: '100%', height: '130px', borderBottom: '10px solid #eee' }} key={item._id}>
                    <img style={{ width: '120px', height: '80px', marginLeft: '20px', marginTop: '25px' }} src={item.img1} />
                    <div>
                        <p style={{ fontSize: '16px', marginLeft: '10px', marginTop: '25px' }}>{item.name}</p>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginLeft: '10px', marginTop: '10px' }}>
                            <p style={{ color: 'gray' }}>公众号</p>
                            <p style={{ marginRight: '10px', color: 'gray', marginTop: '3px' }}>{item.time}</p>
                        </div>
                    </div>
                </div>
            })}
        </div>
    )
}